<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">欧柚配置</div>
      <div class="ele-page-desc">
        用于欧柚相关参数配置。
      </div>
    </div>
    <div class="ele-body">
      <el-card shadow="never">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="230px"
          style="max-width: 700px; margin: 10px auto"
        >


        <el-form-item label="AccessKey:"  prop="ou_accessKey">
          <el-input v-model="form.ou_accessKey" clearable >
          </el-input>
        </el-form-item>

        <el-form-item label="SecretKey:"  prop="ou_secretKey">
          <el-input v-model="form.ou_secretKey" clearable type="password" show-password>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submit">
            提交
          </el-button>
        </el-form-item>
        </el-form>
       
      </el-card>
    </div>
  </div>
</template>

<script>
  import { save ,query } from '@/api/system/config';

  export default {
    name: 'SetYuqun',
    data() {
      return {
        host:window.location.protocol + "//" +location.host,
        count:0,
        // 提交状态
        loading: false,
        disabled: false,
        // 表单数据
        form: {
          ou_accessKey:'',
          ou_secretKey:'',
          
        },
        // 表单验证规则
        rules: {    
          ou_accessKey: [
            {
              required: true,
              message: '请输入AccessKey',
              trigger: 'blur'
            }
          ],
          ou_secretKey: [
            {
              required: true,
              message: '请输入SecretKey',
              trigger: 'blur'
            }
          ],
        },
        // 表格选中数据
        selection: [],
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
      };
    },
    methods: {
     
      query(){
        query({group:'oouu'}).then((data) => {
          if(data != null){
            this.form = data;  
            this.count = data?.count;
          }
          
        }).catch((e) => {
          this.$message.error(e.message);
        });
      },
      /* 提交 */
      submit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true;
            save(this.form).then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              this.query();
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
          } else {
            return false;
          }
        });
      },
      copy_url(content){
        if (window.clipboardData) {
          window.clipboardData.setData('text', content);
        } else {
          (function (content) {
            //oncopy 事件在用户拷贝元素上的内容时触发。
            document.oncopy = function (e) {
              e.clipboardData.setData('text', content);
              e.preventDefault(); //取消事件的默认动作
              document.oncopy = null;
            }
          })(content);
          document.execCommand('Copy');
        }
        this.$message.success('复制成功！');
      },
    },
    mounted() {
      this.query();
    }
    
  };
</script>
<style>
 .my_input{
  width: 400px;
 }
 .pay_header{
    margin-bottom: 30px;
    font-size: 17px;
  }
</style>
